<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>${template.template!} 注册报名</title>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/js/modules/h5/css/css.css">
    <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
    <script src="${request.contextPath}/statics/js/modules/h5/js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var code = null;
        var fflag = false;
        var myMobile ='';
        var houmen = true;

        //var provinceList =[];
        $(document).ready(function () {
            getProvince();
            fflag = false;
            houmen = true;
            if($(window).width()<768){
                $(".page1").height(120);
            }
            $("#sub_btn").click(getPassword);
        });

        function getProvince(){
            jQuery.get('getProvince?tid=${tid!}&ly=${ly!}',
                {},
                function (data) {
                    app.provinceList = data.provinceList;
                    console.log(app.provinceList)
                }
            )
        }










        var isExit = 0;
        function getPassword() {
            fflag = true;
            var mobile = $("#mobile").val();
            if (mobile == "") {
                alert("手机号不能为空");
                return;
            }
            userIsExit(mobile);
            if(isExit == 1){
                return;
            }
            var yanzhengma = $("#TextBox4").val();
            if (yanzhengma == "") {
                alert("图片验证不能为空");
                return;
            }
            if(mobile.length!=11){
                alert("手机号格式有误,请重新输入");
                return;
            }
            $("#sub_btn").attr('disabled',true);
            jQuery.get('getCheckCode?tid=${tid!}&ly=${ly!}',
                { mobile: mobile },
                function (data) {
                    code = data.checkCode;
                    myMobile = mobile;
                    data = data.msg;
                    if (data == "短信发送成功") { //成功
                        //发送按钮隐藏
                        $("#sub_btn").hide();
                        //倒计时显示
                        $("#second").show();
                        endTime = new Date().getTime() / 1000 + 120;
                        getCode();
                    } else if (data == "885") { //失败
                        alert("您的图形验证码输入错误");
                        document.getElementById('ImgCode').src = document.getElementById('ImgCode').src + '?';
                    } else if (data == "false") { //失败
                        $("#sub_btn").hide();
                        $("#sci").show();
                        $("#sci").html("一天内只能获取三次验证码");
                        $("#sci").delay(800)
                    }
                    else {
                        alert(data);
                    }
                }
            )
        }

        //判断用户是否存在
        function userIsExit(obj){
            if (obj) {
                jQuery.ajaxSettings.async = false;
                jQuery.get('userIsExit?tid=${tid!}&ly=${ly!}&mobile=' + obj,
                    {},
                    function (data) {
                        if(data.code==0) {
                            var member = data.member;
                            if(member) {
                                if (member.col20 != null && member.col20 != "") {
                                    isExit = 1;
                                    alert("您已经注册过，请查看电子入场证！");
                                    window.location.href = "ercode?tid=${tid!}&ly=${ly}&id=" + member.id;
                                } else {
                                    alert("您上次未完成注册，请继续完善资料！")
                                    //window.location.href = "index?tid=${tid!}&ly=${ly}&id=" + member.id;
                                    $("#huiyibmb_cusname").val(member.col2);
                                    $("#huiyibmb_canhren").val(member.col3);
                                    $("#huiyibmb_col12").val(member.col12);
                                    $("#huiyibmb_zhiwu").val(member.col5);
                                    $("#huiyibmb_mail").val(member.col7);
                                    $("#huiyibmb_address").val(member.col9);
                                }
                            }
                        }
                    },
                    'json'
                );
                jQuery.ajaxSettings.async = true;
            }
        }

        var getCode = function () {
            var nowTime = new Date().getTime() / 1000;
            var time = Math.floor(endTime - nowTime);
            document.getElementById("second").value = time.toString() + '秒';
            if (time > 0) {
                setTimeout("getCode()", 1000);
            } else {
                $("#sub_btn").show();
                $("#sub_btn").attr('disabled',false);
                $("#second").hide();
                $("#p_msg").hide();
            }
        }

        var mobileClick = function () {
            //手机
            var mobile = $("#mobile").val();
            if (mobile == "") {
                houmen = false;
                alert("手机不能为空");
                $("#mobile").focus();
                return false;
            }
            if (!mobile.match(/^(13|15|16|18|14|17|19)[0-9]{9}$/)) {
                houmen = false;
                alert("手机格式不正确");
                $("#mobile").focus();
                return false;
            }
        }

        function tijiao(tx) {
            var password = $("#password").val();
            if (password.trim() == "" || password==null) {
                alert("请填写短信验证码");
                return;
            }

            var huiyibmb_cusname = $("#huiyibmb_cusname").val();
            if (huiyibmb_cusname.trim() == "" || huiyibmb_cusname==null) {
                alert("请填写公司*");
                return;
            }
            var huiyibmb_canhren = $("#huiyibmb_canhren").val();
            if (huiyibmb_canhren.trim() == "" || huiyibmb_cusname==null) {
                alert("请填写姓名*");
                return;
            }

            <#if (template.id==30||template.id==31||template.id==32||template.id==33||template.id==34) >
                var huiyibmb_col13 = $("#huiyibmb_col13").val();
                if (huiyibmb_col13.trim() == "" || huiyibmb_col13==null) {
                    alert("请填写参观意向*");
                    return;
                }
            <#else>
                var huiyibmb_col12 = $("#huiyibmb_col12").val();
                if (huiyibmb_col12.trim() == "" || huiyibmb_col12==null) {
                    alert("请填写主营产品*");
                    return;
                }
            </#if>

                if($("#ttid").val()==11){
                    var huiyibmb_col51 = $("#huiyibmb_col51").val();
                    if (huiyibmb_col51.trim() == "" || huiyibmb_col51==null) {
                        alert("请填写组织单位*");
                        return;
                    }
                }


            var huiyibmb_zhiwu = $("#huiyibmb_zhiwu").val();
            if (huiyibmb_zhiwu.trim() == "" || huiyibmb_cusname==null) {
                alert("请填写职务*");
                return;
            }

            var province = $("#province").val();
            if (province.trim() == "" || province==null) {
                alert("请选择省*");
                return;
            }

            var city = $("#city").val();
            if (city.trim() == "" || city==null) {
                alert("请选择市*");
                return;
            }

            /*var email = $("#huiyibmb_mail").val();
            if(!email.match(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)&&email.trim() != ""){
                alert("邮箱格式不正确");
                return;
            }*/


            //判断是否有同行
            var flag = true;
            for(var i=1;i<count;i++) {
                if (!($("#name" + i) && $("#name" + i).val().trim() != '')) {
                    alert("同行人员" + i + "姓名不能为空");
                    flag = false;
                    break;
                }
                /*if (!($("#mobile" + i) && $("#mobile" + i).val().trim() != '')) {
                    alert("同行人员" + i + "手机号不能为空");
                    flag = false;
                    break;
                }*/

                var mobile = $("#mobile" + i).val();
                //if (mobile!=null && mobile.trim().length != 11) {
                if (!mobile.match(/^(13|15|16|18|14|17|19)[0-9]{9}$/)) {
                    alert("同行人员" + i + "手机号格式不正确");
                    flag = false;
                    break;
                }
                if($("#telPhone").val()==$("#mobile" + i).val()){
                    alert("同行人员" + i + "手机号已存在！");
                    flag = false;
                    break;
                }
            }

            if (!flag) {
                return;
            }
            mobileClick();
            if(($("#password").val()==code&&myMobile==$("#mobile").val())||(houmen&&$("#password").val()==119119)){
                console.log(houmen);
                $("#f1").submit();
                $("#Button1").attr('disabled',true);
            }else{
                if(fflag==true){
                    alert("验证码错误");
                }
            }
        }

        var count = "${txCount!'1'}"*1;
        function addTongxing() {
            var margin = "";
            if(count>1){
                margin = "margin-top:16px;";
            }
            if(count<=$("#tx").val()) {
                var li = '<div id="tx' + count + '">';
                li += '<li style="position:relative;'+margin+'"><span>同行人员' + count + '*：</span> <input type="text" style="width:60%;" class="txt form-control" name="names" id="name' + count + '" placeholder="姓名">';
                li += '<label style="position:absolute;top:75%;padding-left: 10px;" onclick="javascript:delTongxing(' + count + ');"><img src="${request.contextPath}/statics/js/modules/h5/images/del.png" width="25" height="25"/></label></li>';
                li += '<li ><span>&nbsp;</span> <input type="text" class="txt form-control" style="width:60%;" name="mobiles" id="mobile' + count + '" placeholder="手机号"></li>';
                li += '</div>';
                $("#tongxing").append(li);
                if(count==$("#tx").val()){
                    $("#Button2").css("background-color","#C8C8C8");
                }else{
                    $("#Button2").css("background-color","${template.colorBg!}");
                }
                count++;
            }else{
                alert("最多添加"+$("#tx").val()+"名同行人员");
            }
        }

        function delTongxing(id) {
            $("#tx"+id).remove();
            if(count==$("#tx").val()){
                $("#Button2").css("background-color","#C8C8C8");
            }else{
                $("#Button2").css("background-color","${template.colorBg!}");
            }
            count --;
        }


    </script>
</head>

<body>
    <!--header start-->
    <div class="header">
        <img src="${template.headImgPc!}" class="img_pc" />
        <img src="${template.headImg!}" class="img" />
    </div>
    <!--header end-->
    <div class="zc_main" id="rrapp">
        <div class="zc_one">
            ${title_zh!'展会注册报名'}
            <br><span> ${title_en!'Personal Register'}</span>
        </div>
        <!--中文-->
        <form method="post" action="doReg2?tid=${tid!}&ly=${ly}" id="f1" onsubmit="return mobileClick()">
            <input type="hidden" name="s" value="${s!}"/>
            <input type="hidden" id="ttid" value="${template.id!}"/>
            <input type="hidden" id="tx" value="${template.tongxing!}"/>
            <ul class="zc_three">
                <li>
                    <span>手机号码*：</span>
                    <input name="mobile" type="text" id="mobile" value="${(member.col1)!''}" class="txt txt_tell form-control" placeholder="请输入手机号码" />
                </li>
                <li>
                    <span>短信验证：</span>
                    <input name="password" value="${password!}"  type="text" id="password" class="txt txt_xin" placeholder="短信验证码" />

                    <input type="button" class="btn_yzm" value="获取验证码" onclick="javascript: void (0)" id="sub_btn" >
                    <input type="button" class="btn_yzm" value="" id="second" style="display: none; ">
                    <input type="button" class="btn_yzm" value="" id="sci" style="display: none; ">
                </li>

                <li><span>公司*：</span><input type="text" class="txt form-control" id="huiyibmb_cusname" name="huiyibmb_cusname" value="${(member.col2)!''}" placeholder="请输入公司"> </li>
                <li ><span>姓名*：</span> <input type="text" class="txt form-control" name="huiyibmb_canhren" id="huiyibmb_canhren" value="${(member.col3)!''}" placeholder="请输入姓名"></li>

                <#if (template.id==30||template.id==31||template.id==32||template.id==33||template.id==34) >
                <li ><span>参观意向*：</span> <input type="text" class="txt" name="huiyibmb_col13" id="huiyibmb_col13" value="${(member.col13)!''}"></li>
                <#else>
                <li ><span>主营产品*：</span> <input type="text" class="txt form-control" name="huiyibmb_col12" id="huiyibmb_col12" value="${(member.col12)!''}" placeholder="请输入主营产品"></li>
                </#if>

                <li><span>职务*：</span><input type="text" class="txt form-control" id="huiyibmb_zhiwu" name="huiyibmb_zhiwu" value="${(member.col5)!''}" placeholder="请输入职务"> </li>


                <#if ((template.id)??)&&(template.id==11)>
                <li ><span>组织单位*：</span> <input type="text" class="txt form-control" name="huiyibmb_col51" id="huiyibmb_col51" value="${(member.col51)!''}" placeholder="请输入组织单位"></li>
                </#if>


                    <li><span>地区*：</span>
                        <select id="province" name="province" style="width: 31%;" v-model="provinceId" @change="getCity" class="txt">

                            <option value=""></option>
                            <option v-for="option in provinceList" v-bind:value="option.id">
                                {{ option.name }}
                            </option>


                        </select>
                        <select id="city" name="city" style="width: 31%;margin-left: 5px" v-model="cityId" @change=""  class="txt">
                            <option value=""></option>
                            <option v-for="option in cityList" v-bind:value="option.name">
                                {{ option.name }}
                            </option>
                        </select>
                    </li>

                <li><span>详细地址：</span><input type="text" class="txt form-control" id="huiyibmb_address" name="huiyibmb_address" value="${(member.col9)!''}" placeholder="请输入地址"> </li>
                <li><span>邮箱：</span><input type="text" class="txt form-control" id="huiyibmb_mail" name="huiyibmb_mail" value="${(member.col7)!''}" placeholder="邮箱选填">    </li>
            </ul>

            <ul class="ll_one" id="tongxing" style="border-top:1px solid #C8C8C8;margin-top:20px;">
                <label style="font-size: 12px;margin-left:20px;">注：同行人员最多可填写${template.tongxing}人，团队请直接致电组委会</label>
                ${tongxing!}
            </ul>
            <ul class="ll_one">
                <li class="li">
                    <input type="button" name="Button2" value="添加同行人员" onclick="addTongxing()" id="Button2" class="btn" />
                    <input type="button" name="Button1" value="下一步" style="padding:0 40px;" onclick="tijiao(0);" id="Button1" class="btn" />
                </li>
            </ul>

        </form>
    </div>

    <!--main start-->
    <div class="page1">
        <ul>
            <#if (s)??>
                <li <#if s=='3'>style="display:none;"</#if>>
                    <a href="index?tid=${tid!}&ly=${ly!}&s=3">
                        <img src="${request.contextPath}/statics/js/modules/h5/images/img3.png">
                        展会注册报名<br>
                        <span>Form for application</span>
                    </a>
                </li>
                <li <#if s=='2'>style="display:none;"</#if>>
                    <a href="reg?tid=${tid!}&ly=${ly!}&s=2">
                        <img src="${request.contextPath}/statics/js/modules/h5/images/img4.png">
                        名片报名<br>
                        <span>Business card recognition</span>
                    </a>
                </li>
            </#if>
        </ul>
    </div>

    <#if (template.contactTel)??>
    <div class="zc_four" style="" >
        <img src="${request.contextPath}/statics/js/modules/h5/images/img8.png"><br>
        参观咨询<br>
        ${template.contactTel!}
    </div>
    </#if>



<script>
     var app = new Vue({
                el:'#rrapp',//el表示DOM元素,一定是与html元素相关的容器元素
                data:{//数据存储
                    provinceList : [],
                    provinceId:'',
                    cityList: [],
                    cityId:''
                },
                methods:{
                    getCity: function (){
                        jQuery.get('getCity?tid=${tid!}&ly=${ly!}',
                        {id: app.provinceId},
                        function (data) {
                            app.cityList = data.cityList;
                            console.log(app.cityList)
             }
         )
     }
                }
            }
        );

</script>
    <!--main end-->

    <!--footer start-->
    <footer>
        <!--<#if ((template.guanggao)??)&&(template.guanggao!='')>
        <div style="border: 1px solid #9d9d9d;border-radius: 3px; width: 35px;font-size: 12px;position: absolute;margin: 2.5% 0 0 3%;color: #ffffff;">广告</div>
        <img src="${template.guanggao!}" class="img_pc"  style="border-radius:5px;width:95%; margin:2%;"/>
        <img src="${template.guanggao!}" class="img" style="border-radius:5px;width:95%; margin:2%;"/>
        </#if>-->
        <img src="${template.footImgPc!}" class="img_pc" />
        <img src="${template.footImg!}" class="img" />
    </footer>
    <!--footer end-->

    <!--统计代码-->
    <div style="display:none">
        <script type="text/javascript" src="https://s5.cnzz.com/z_stat.php?id=1277709907&web_id=1277709907"></script>
    </div>

    <style>
        ul,ul li{ list-style:none; margin:0px; padding:0px;color:#2d889b;}
        *{font-family:Microsoft Yahei; margin:0px; padding:0px; color:#2d889b;}
        a:hover{ text-decoration:none;color:#2d889b;}
        .sy_four .nei .a:hover,.sy_six .ul li h1 a:hover,.sy_six .amore:hover,.sy_nine .left a:hover,.footer_one li h1 a:hover,.footer_one li p a:hover,.footer_four .right a:hover{ color:#39F}
        .zc_three li .btn_next:hover,.zc_three li .btn_yzm:hover,.ll_one li .btn:hover,.dy_one li .btn:hover{ background:#2d889b;}
        /* page1 */
        .page1{ width:1030px; margin:0 auto; }
        .page1 ul{ float:left; width:100%; margin-bottom:60px;}
        .page1 ul li{ float:center; width:42%; margin-left: 30%; margin-top:50px;}
        .page1 ul li a{ float:left; width:95%; height:103px; border-radius:100px; border:1px solid #2d889b; border-left:0px; background:#E8E8E8; text-align:center; font-size:32px; color:${template.colorBg!}; line-height:34px; padding-top:15px; padding-right:5%}
        .page1 ul li a img{ float:left; margin-top:-15px;}
        .page1 ul li a span{ font-size:18px;color:${template.colorBg!}}
        .page1 ul li a.sel{ background:#2d889b; color:#fff;}
        .page1 ul li a.sel span{ color:#fff;}
        @media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
            .page1{ width:90%; margin-left:5%; /*float:left;*/}
            .page1 ul li{ width:100%; margin:0px 3%; margin-top:40px;}
            .page1 ul li a{ height:70px; padding-top:10px; font-size:20px; line-height:26px;}
            .page1 ul li a span{ font-size:15px;}
            .page1 ul li a img{ height:70px; margin-top:-10px;}
        }
        @media (max-width: 767px) {/* 手机 */
            .page1{ width:70%; margin-left:15%; /*float:left;*/ padding-top:0px; padding-bottom:0;}
            .page1 ul li{ width:100%; margin:0px; margin-top:20px;}
            .page1 ul li a{ height:57px; padding-top:7px; font-size:16px; line-height:20px;}
            .page1 ul li a span{ font-size:12px;}
            .page1 ul li a img{ height:54px; margin-top:-7px;}
            .page1 ul{ margin-bottom:0}
        }
        /* 注册 zc */
        .zc_main{ width:680px; margin:0px auto;}
        .zc_one{ float:left; width:100%; padding:30px 0px; text-align:center; font-size:34px; color:${template.colorBg!}; line-height:30px;}
        .zc_one span{ font-size:21px;color:${template.colorBg!};}
        .zc_two{ float:left; width:100%; border-bottom:1px solid #2d889b; text-align:center;}
        .zc_two li{ display:inline-block; width:200px; height:70px; text-align:center; line-height:70px; border:1px solid #2d889b; border-bottom:0px; margin:0px 10px; color:#2d889b; font-size:24px; border-top-left-radius:20px; border-top-right-radius:20px; background:#E8E8E8; cursor:pointer;}
        .zc_two li.sel{ background:#2d889b; color:#fff}
        .zc_three{ float:left; width:88%; margin-left:6%; padding:40px 0px;}
        .zc_three li{ float:left; width:100%; padding:15px 0px;}
        .zc_three li span{ width:25%;float:left; line-height:60px; color:${template.colorBg!}; font-size:24px; padding-right:10px;}
        .zc_three li .txt{ padding-left: 10px ;width:64%; border:1px solid ${template.colorBg!}; padding-left:70px; float:left; height:60px; line-height:60px; font-size:20px;}
        .zc_three li .txt::-webkit-input-placeholder {color:#E8E8E8;}
        .zc_three li .txt:-moz-placeholder {color:#E8E8E8;}
        .zc_three li .txt::-moz-placeholder {color:#E8E8E8;}
        .zc_three li .txt:-ms-input-placeholder {color:#E8E8E8}
        .zc_three li .txt_tell{ float:left; /*width:396px;*/}
        .zc_three li .txt_yzm{ float:left; width:196px; background:url(../images/bg_02.png) no-repeat left center;}
        .zc_three li .txt_xin{ float:left; width:196px; }
        .zc_three li .img_yzm{ float:left; margin-left:20px; height:60px;}
        .zc_three li .btn_yzm{ float:left; margin-left:5px; background:${template.colorBg!}; height:62px; line-height:62px; cursor:pointer; color:#fff; font-size:20px; width:180px;}
        .zc_three li .btn_next{ float:left; width:100%; height:60px; line-height:60px; background:${template.colorBg!}; color:#fff; font-size:20px; cursor:pointer;}

        .zc_four{ float:left; width:100%; border-top:1px solid #2d889b; padding:20px 0px; text-align:center; color:#2d889b; font-size:20px; line-height:30px;}
        @media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
            .zc_one{ font-size:30px;}
            .zc_one span{ font-size:18px;}
            .zc_two li{ height:60px; line-height:60px; font-size:20px;}
        }
        @media (max-width: 767px) {/* 手机 */
            .zc_main{ float:left; width:90%; margin-left:5%}
            .zc_one{ font-size:20px; line-height:20px; padding:20px 0px;}
            .zc_one span{ font-size:12px;}
            .zc_two li{ height:36px; line-height:36px; font-size:14px; width:110px; margin:0px 10px;border-top-left-radius:10px; border-top-right-radius:10px; }
            .zc_three{ float:left; width:100%; margin:0px; padding:10px 0px;}
            .zc_three li{ width:100%; padding:9px 0px;}
            .zc_three li span{ float:left; width:25%; font-size:14px; padding:0; line-height:40px;}
            .zc_three li .txt{padding-left: 10%;line-height:40px; height:40px; font-size:13px;}
            .zc_three li .txt_tell{  width:64%; padding-left:10%;  background-size:40px;}
            .zc_three li .txt_yzm{ width:35%; padding-left:10%; background:url(../images/bg_02.png) no-repeat 0px center; background-size:24px;}
            .zc_three li .img_yzm{ margin:0px; width:25%; float:right; height:40px;}
            .zc_three li .txt_xin{ width:35%; padding-left:10%; background:url(../images/bg_03.png) no-repeat -4px center; background-size:32px;}
            .zc_three li .btn_yzm{ width:27%; height:42px; line-height:42px; font-size:13px; margin-left:5px;}
            .zc_three li .btn_next{ height:40px; line-height:40px; font-size:14px;}
            .zc_four{ font-size:13px; line-height:22px; padding:10px 0px;}
            .zc_four img{ width:20px;}
        }

        /* 联络信息 ll */
        .main{ width:680px; margin:0px auto;}
        .ll_one{ float:left; width:100%; padding:30px 0px;}
        .ll_one li{ float:left; width:100%; padding-top:20px; line-height:60px; font-size:22px; color:#2d889b;}
        .ll_one li span{ float:left; width:20%; font-size:22px; color:${template.colorBg!};}
        .ll_one li .txt{ float:left; width:65%; padding-left:3%; border:1px solid ${template.colorBg!}; line-height:60px; font-size:22px; color:${template.colorBg!};}
        .ll_one li .txt::-webkit-input-placeholder {color:#E8E8E8;}
        .ll_one li .txt:-moz-placeholder {color:#E8E8E8;}
        .ll_one li .txt::-moz-placeholder {color:#E8E8E8;}
        .ll_one li .txt:-ms-input-placeholder {color:#E8E8E8}
        .ll_one li label{ cursor:pointer; margin-right:30px;; color:${template.colorBg!};}
        .ll_one li label input{ width:20px; height:20px;}
        .ll_one li .txt3{ width:16%}
        .ll_one li .txt2{ width:38.5%; margin:0px 2%;}
        .ll_one li .select{ float:left; border:1px solid #2d889b; line-height:60px; font-size:22px; color:#2d889b; height:60px; margin-right:10px; width:26%; padding:0px 5px;}
        .ll_one li .sel_qu{ width:29.5%; margin-right:0}
        .ll_one .li,.dy_one .li{ text-align:center;}
        .ll_one li .btn,.dy_one li .btn,.tx_four .btn{border-radius: 4px;height:60px; font-size:22px; background:${template.colorBg!}; color:#fff; padding:0px 25px;}
        @media (max-width: 767px) {/* 手机 */
            .main{ width:92%; margin-left:4%; float:left;}
            .ll_one{ padding:0px; padding-top:10px; padding-bottom:20px;}
            .ll_one li { padding-top:10px; line-height:36px; font-size:14px;}
            .ll_one li span{ font-size:14px; line-height:36px; width:27%;}
            .ll_one li .txt{ height:36px; line-height:36px; font-size:14px; width:68.5%; padding-left:3.5%;}
            .ll_one li label input{ width:15px; height:15px; float:left; margin-top:10px; margin-right:4px;}
            .ll_one li label{margin-right:15px; float:left;}
            .ll_one li .txt3{ width:15%}
            .ll_one li .txt2{ width:34.5%; margin:0px 1.5%;}
            .ll_one li .select{ height:36px; line-height:36px; font-size:14px; width:26%; margin-right:1%}
            .ll_one li .sel_qu{ width:28%; margin-right:0}
            .ll_one li .btn,.dy_one li .btn,.tx_four .btn{ padding:0px 20px; height:40px; line-height:40px; font-size:14px;}
        }

        /* 调研信息 dy */
        .dy_one{ float:left; padding-top:40px; width:90%; margin-left:5%;}
        .dy_one li{ float:left; width:100%; padding-bottom:40px;}
        .dy_one li .top{ float:left; width:100%; background:#E8E8E8;color:#2d889b; font-size:24px; line-height:60px;}
        .dy_one li .top i{ float:left; width:60px; height:60px; text-align:center; line-height:60px; background:#2d889b; font-size:48px; color:#E8E8E8; font-style:inherit; border-right:10px solid #fff;}
        .dy_one li .top span{ padding-left:15px;;color:#2d889b;}
        .dy_one li .bottom{ float:left; width:100%; padding-top:15px;}
        .dy_one li label{ float:left; width:100%; line-height:50px; font-size:24px; color:#2d889b; cursor:pointer;}
        .dy_one li label input{ width:24px; height:24px; float:left; margin-left:100px; margin-top:14px; margin-right:10px;}
        .dy_one li .btn{ width:40%; margin:0px 20px;background:#2d889b;color:#fff;}
        @media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
            .dy_one li .top{ line-height:50px; font-size:20px;}
            .dy_one li .top i{ height:50px; width:50px; line-height:50px; font-size:36px}
            .dy_one li label{ font-size:20px; line-height:44px;}
            .dy_one li label input{ width:20px; height:20px;}
            .dy_one li .btn{ font-size:20px; line-height:50px; height:50px;}
        }
        @media (max-width: 767px) {/* 手机 */
            .dy_one{ width:100%; margin-left:0%; padding-top:20px;}
            .dy_one li{ padding-bottom:20px;}
            .dy_one li .top{ line-height:40px; font-size:15px;}
            .dy_one li .top i{ height:40px; width:40px; line-height:40px; font-size:26px; border-right:5px solid #fff;}
            .dy_one li .top span{ padding-left:10px;}
            .dy_one li label{ font-size:20px; font-size:12px; line-height:28px;}
            .dy_one li label input{ width:14px; height:14px; margin-left:50px; margin-top:8px; margin-right:5px;}
            .dy_one li .btn{ margin:0px 5px; width:45%; padding:0px; font-size:13px;}
        }

        /* 我的 wd */
        .wd_one{ float:left; width:80%;  background:#2d889b; border-radius:20px; margin:50px 10%;}
        .wd_one h5{ float:left; font-weight:normal; font-size:14px; letter-spacing:20px;margin:0px; line-height:76px; color:#fff; text-align:center; width:100%}
        .wd_one .img{ float:left; width:100%; text-align:center;}
        .wd_one .img img{ width:80%;}
        .wd_one .bottom{ float:left; width:100%; text-align:center; padding:15px 0px; color:#fff; font-size:24px; line-height:40px; letter-spacing:3px;}
        .wd_two{ float:left; width:100%; margin-left:0%; margin-bottom:20px;}
        .wd_two li{ float:left; width:42%; margin-left:5%; margin-bottom:25px;}
        .wd_two li a{ float:left; width:92%; padding-right:8%; text-align:center; border:1px solid #2d889b; height:55px; border-radius:100px; border-left:0px; color:#2d889b; font-size:24px; line-height:22px; padding-top:15px; background:#E8E8E8;}
        .wd_two li a img{ float:left; margin-top:-16px;}
        .wd_two li a span{ font-size:13px;color:#2d889b;}
        .wd_two li a.sel{ color:#fff; background:#2d889b}
        .wd_two li a.sel span{ color:#fff;}
        .wd_three{ float:left; width:100%; text-align:center; padding-bottom:15px; color:#2d889b; font-size:24px; padding-top:20px;}
        .txt_wd{ float:left; width:92%; border:1px solid #2d889b; border-radius:20px; padding:20px 4%; height:240px; line-height:40px; font-size:18px; color:#2d889b; margin-bottom:40px; outline:none;}
        @media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
            .wd_one{ width:60%; margin:30px 20%;}
            .wd_one h5{ letter-spacing:8px; font-size:14px; line-height:60px;}
            .wd_one .bottom{ font-size:20px; line-height:30px; padding:15px 0px;}
        }
        @media (max-width: 767px) {/* 手机 */
            .wd_one{ width:90%; margin:30px 5%;}
            .wd_one h5{ letter-spacing:4px; font-size:12px; line-height:50px;}
            .wd_one .bottom{ font-size:14px; line-height:20px; padding:6px 0px;}
            .wd_two li{ width:90%; margin:0px; margin-left:5%; margin-bottom:20px; padding:0px;}
            .wd_two li a{ height:42px; width:92%; padding-top:8px; font-size:18px; line-height:18px; padding-right:8%;}
            .wd_two li a img{ height:50px; margin-top:-8px;}
            .wd_two li a span{ font-size:12px;}
            .wd_three{ font-size:16px; padding-bottom:10px; padding-top:10px;}
            .txt_wd{ width:92%; padding:10px 4%; font-size:13px; line-height:24px; height:140px;}
        }
        .qd_one{ float:left; width:83%; margin:20px 0px; margin-left:5%; border:1px solid #2d889b; padding:10px 3.5%; text-align:center;}
        .qd_one img{max-width:100%; border-radius:20px;}

        .dq_two{ float:left; width:100%; padding-top:35px; background:url(../images/bg_04_1.png) no-repeat top center; background-size:auto 25px; color:#2d889b; font-size:12px; padding-bottom:20px; line-height:20px; text-align:center;}
        .qd_three{ float:left; width:100%; text-align:center; padding-bottom:20px;}
        .qd_three .btn{ height:34px; background:#2d889b; color:#fff; font-size:14px; width:35%; margin:0px 10px;}
        /* 邀请 yq */
        .yq_one{ float:left; width:100%; padding-top:80px; text-align:center; color:#2d889b; font-size:28px; line-height:60px; letter-spacing:6px; padding-bottom:10px;}
        .yq_two{ color:#2d889b;float:left; width:100%; background:url(images/bg_04.png) no-repeat top center; height:200px; font-size:32px; text-align:center; line-height:36px;}
        .yq_two span{ color:#2d889b;font-size:18px; letter-spacing:3px;}
        .yq_three{color:#2d889b; float:left; width:100%; text-align:center; line-height:70px; font-size:36px; letter-spacing:3px;}
        .yq_four{ color:#2d889b;float:left; width:80%; margin-left:10%; margin-top:40px; border:1px solid #2d889b; border-radius:20px; padding-bottom:200px;}
        .yq_four .top{ color:#2d889b;float:left; width:100%; padding-top:40px; line-height:40px; font-size:27px; letter-spacing:24px; text-align:center; padding-bottom:30px;}
        .yq_four .top span{ color:#2d889b;font-size:15px; letter-spacing:3px}
        .yq_four .img{ float:left; width:100%; text-align:center;}
        .yq_four .img img{ width:50%}
        .yq_four .bottom{color:#2d889b; float:left; width:100%; text-align:center; font-size:14px; line-height:30px; letter-spacing:3px;}

        .yq_five{ color:#2d889b;float:left; width:90%; margin-left:5%; background:url(images/bg_05.png) no-repeat left top; background-size:100%; height:360px; margin-top:-200px; text-align:center; font-size:28px; letter-spacing:15px; line-height:40px; padding-top:20px;}
        @media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
            .yq_one{ padding-top:60px; font-size:24px; line-height:50px;}
            .yq_two span{ font-size:16px;}
            .yq_three{ font-size:32px; line-height:60px;}
        }
        @media (max-width: 767px) {/* 手机 */
            .yq_one{ padding-top:10px; font-size:15px; line-height:20px; letter-spacing:3px;}
            .yq_two{ height:90px; background-size:auto 100%; font-size:20px; line-height:22px;}
            .yq_two span{ font-size:12px; letter-spacing:1px;}
            .yq_three{ font-size:15px; line-height:24px; margin-top:10px; letter-spacing:2px;}
            .yq_four { padding-bottom:100px; width:84%; margin-left:8%; margin-top:10px;}
            .yq_four .top{ font-size:16px; letter-spacing:10px; padding-top:10px; line-height:24px; padding-bottom:5px;}
            .yq_four .top span{ font-size:12px;}
            .yq_four .img img{ width:50%}
            .yq_four .bottom{ font-size:12px; letter-spacing:1px;}
            .yq_five{width:100%; margin:0px; margin-top:-100px; font-size:16px; padding-top:10px; line-height:22px; letter-spacing:5px; height:210px; background-size:100%;}
        }
        /* 头像 tx */
        .tx_one{ float:left; width:100%; padding-top:80px; text-align:center;}
        .tx_one img{ max-width:55%; border-radius:400px;}
        .tx_two{ float:left; width:100%; text-align:center; line-height:80px; font-size:24px; color:#2d889b; margin:0px; font-weight:normal;}
        .tx_three{ float:left; width:80%; margin-left:10%; line-height:30px; color:#2d889b; font-size:16px; padding-bottom:40px;}
        .tx_four{ float:left; width:100%; text-align:center; padding-bottom:60px;}
        .tx_four .btn{ width:40%;background:#2d889b; color:#fff;}
        @media screen and (min-width: 768px) and (max-width: 992px) {/* 平板 */
            .tx_four .btn{ width:60%;}
        }
        @media (max-width: 767px) {/* 手机 */
            .tx_one img{ max-width:36%; border-radius:400px;}
            .tx_one{ padding-top:15px;}
            .tx_two{ line-height:40px; font-size:15px;}
            .tx_three{ width:100%; padding:0px; margin:0px; font-size:12px; line-height:20px; padding-bottom:15px;}
            .tx_four{ padding-bottom:20px;}
            .tx_four .btn{ width:45%}
        }
    </style>
</body>
</html>
